<template>
  <div class="userDetail">
    <h2>详细介绍</h2>
    <el-descriptions
      class="xxb1"
      direction="vertical"
      :column="4"
      border
    >
      <el-descriptions-item label="账号" :span="2"> {{ ruleForm.uid }} </el-descriptions-item>
      <el-descriptions-item label="姓名" :span="2">
        {{ ruleForm.username }}
      </el-descriptions-item>
      <el-descriptions-item label="性别" :span="2">
        <el-tag size="small"> {{ ruleForm.gender }} </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="注册时间" :span="2">
        {{ ruleForm.addTime }}
      </el-descriptions-item>
      <el-descriptions-item label="电话" :span="2">
        <el-tag size="small" type="danger"> {{ ruleForm.phone }} </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="邮箱" :span="2"> {{ ruleForm.email }} </el-descriptions-item>
    </el-descriptions>
    <div class="xxb2">
      <el-button type="warning" @click="router.push('/userSta')" plain
        >点击查看我的观影偏好</el-button
      >
    </div>

    <div class="xxb3">
      <div class="xxb4">
        <el-image
          :src="wxLogo"
          width="100%"
          height="100%"
          class="xxb5"
        ></el-image>
      </div>
      <el-button type="success" class="xxb6" plain @click="bind"
        >绑定我的微信</el-button
      >
    </div>
    <el-dialog title="绑定微信" v-model="wxBind" width="100%" :before-close="handleClose">
      <div>
        <div style="margin-top: -6%">
          <h1>请绑定您的微信</h1>
        </div>
        <el-image :src="pic" id="qrCodeImgId" class="xxb7"/>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const pic = ref(null)
const sceneStr = ref(null)
const t = ref(null)
const openId = ref(null)
const ruleForm = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headSrc: ''
})
const wxLogo = require('@/assets/wx.jpg')
const wxBind = ref(false)
ruleForm.uid = JSON.parse(sessionStorage.getItem('uid'))
ruleForm.username = JSON.parse(sessionStorage.getItem('username'))
ruleForm.gender = JSON.parse(sessionStorage.getItem('gender'))
ruleForm.addTime = JSON.parse(sessionStorage.getItem('addTime'))
ruleForm.phone = JSON.parse(sessionStorage.getItem('phone'))
ruleForm.email = JSON.parse(sessionStorage.getItem('email'))
ruleForm.headSrc = JSON.parse(sessionStorage.getItem('headSrc'))

const bind = () => {
  wxBind.value = true
}
const wxBinding = () => {
  axios.get('/api/login/bindWx/' + ruleForm.uid + '/' + openId.value).then((res) => {
    if (res.data === 1) {
      ElMessage({
        showClose: true,
        message: '绑定成功！',
        type: 'success'
      })
      wxBind.value = false
    }
  })
}
const getOpenId = () => {
  axios.get('/api/login/getOpenId/' + sceneStr.value).then((res) => {
    if (res.data.code === 200) {
      window.clearInterval(t.value)
      openId.value = res.data.data.openId
      wxBinding()
    }
  })
}
const getQrCode = () => {
  axios.get('/api/login/getQrCode').then((res) => {
    if (res.data.code === 200) {
      sceneStr.value = res.data.data.sceneStr
      pic.value = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + res.data.data.ticket
      t.value = window.setInterval(getOpenId, 3000)
    }
  })
}

onMounted(() => {
  getQrCode()
})
</script>
<style lang="scss" scoped>
.userDetail {
  width: 100%;
  height: 480px;
  float: left;
  margin-right: -30px;
  overflow: auto;
  background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
}
.xxb1{
  width: 100%; margin-top: 2%; margin-left: 1%; font-size: 15px
}
.xxb2{
  width: 100%; margin-top: 50px
}
.xxb3{
  width: 100%; margin-top: 20px
}
.xxb4{
  width: 35px; height: 35px; margin-top: 22px; margin-left: 64%
}
.xxb5{
  border-radius: 50%; overflow: hidden
}
.xxb6{
  margin-top: -55px; margin-left: -15%
}
.xxb7{
  width: 300px; height: 300px
}
</style>
